<script setup>
import axios from "axios";
import { ref } from 'vue';
// 定义一个响应式变量

const  temperature = ref(0); //温度
const  humidity = ref(0);   //湿度
const  concentration = ref(0);  //二氧化碳浓度
const  battery = ref(0);
const  busy = ref(true);
//1、利用axios对象的方法create,去创建一个axios实例
const requests = axios.create({
  //配置对象
  //基础路径，requests发出的请求在端口号后面会跟改baseURl
  baseURL: `${window.location.origin}`,
  //代表请求超时的时间5s
  timeout: 5000,
})
// 定义请求函数
const fetchData = () => {
  requests("/api/datatest").then((res)=>{
    console.log(res);
    temperature.value = res.data.environment.Temperature;
    humidity.value = res.data.environment.Humidity;
    concentration.value = res.data.environment.CO2;
    battery.value = res.data.sta.Battery*100;
    relax.value = res.data.sta.Task;
  })
};

// 初始立即执行一次
fetchData();

// 每一分钟执行一次
setInterval(fetchData, 60); // 60000毫秒 = 1分钟

</script>

<template>
  <div class="data">
    <div class="first">
      <div class="up">
          <div class="powers">
            <img src="@/assets/电池电量.png" alt="">
          </div>
          <div class="powers-text">
            电池电量
          </div>
      </div>
      <div class="down">
          {{battery}}%
      </div>
    </div>
    <div class="last">
      <div class="factor-info">
        当前环境信息
      </div>
      <div class="machine-info">
        <div>
          <strong>温度(°C)</strong>
        </div>
        <div>
          <strong>{{temperature}}</strong>
        </div>
      </div>
      <div class="machine-info">
        <div>
          湿度(%RH)
        </div>
        <div>
          {{humidity}}
        </div>
      </div>
      <div class="machine-info">
        <div>
          CO2浓度(ppm)
        </div>
        <div>
          {{concentration}}
        </div>
      </div>
    </div>
    <div class="bottoms">
      <div v-if="relax" class="stop">
        <div class="stop-img">
          <img src="@/assets/终止.png" alt="">
        </div>
        <div class="stop-text">
          终止任务
        </div>
      </div>
      <div v-else class="relax">空闲中</div>
    </div>
  </div>
</template>

<style lang="css">
.data {
  margin-left: 90px;
  width: 300px;
  height: 800px;
  //background-color: pink;
  display: flex;
  flex-direction: column;
}
.first{
  width: 250px;
  height: 140px;
  border: none; /* 移除按钮边框 */
  border-radius: 10px; /* 圆角 */
  font-size: 16px; /* 字体大小 */
  color: #333; /* 文字颜色 */
  cursor: pointer; /* 鼠标样式为指针 */
  transition: background-color 0.3s ease;
  margin-bottom: 20px;/* 过渡效果 */
  background-color: #f0f0f0; /* 浅灰色背景 */
}
.up{
  margin-top:30px;
  height: 20px;
  width: 150px;
  margin-left: 20px;
  font-size: 20px;
  display: flex;
  flex-direction: row;
}
.up .powers{
  width: 100px;
  height: 50px;
}
.up .powers-text{
  width: 170px;
  height: 50px;
  margin-left: 20px;
  margin-top:10px;
  font-size: 20px;
}
.powers img{
  width: 100%;
  height: 100%;
}
.down{
  height: 80px;
  line-height: 80px;
  font-size: 35px;
  text-align: center;
  margin-top:10px;
}

.last{
  width: 250px;
  height: 210px;
  margin-top:20px;
  background-color: #f0f0f0; /* 浅灰色背景 */
  display: flex;
  flex-direction: column;
  border-radius: 10px; /* 圆角 */
}
.last .factor-info{
  width: 250px;
  height: 50px;
  line-height: 50px;
  font-size: 25px;
}
.last .machine-info{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 20px;
  margin-bottom: 5px;
  margin-top:20px;
}
.last .machine-info div{
  margin-left: 5px;
  margin-right: 5px;
}
.bottoms,.relax,.stop{
  width: 250px;
  height: 100px;
  background-color: #f0f0f0; /* 浅灰色背景 */
  border-radius: 10px;
  font-size: 30px;
  text-align: center;
  line-height: 100px;
}
.bottoms{
  margin-top: 20px;
}
.stop{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.stop-img{
  width: 50px;
  height: 50px;
  margin-top: 15px;
  margin-left:20px;
}
.stop-img img{
  width: 100%;
  height: 100%;
}
</style>